<template>
  <el-scrollbar class="main">
    <div class="container">
      <el-row justify="start">
        <el-button icon="el-icon-back" type="text" @click="back" v-if="hasBack" class="back"></el-button>
        <i class="split"></i>
        <el-col :span="6">
          <h1>{{title}}</h1>
        </el-col>
      </el-row>
      <el-card class="tableCard">
        <slot></slot>
      </el-card>
    </div>
  </el-scrollbar>
</template>

<script>
export default {
  name: "page",
  emits:['back'],
  props:{
    title:String,
    hasBack:Boolean,
    backCallback:Function
  },
  methods:{
    back(){
      if(typeof(this.backCallback) == 'undefined'){
        this.$router.back()
      }else{
        this.backCallback();
      }
    }
  }
}
</script>

<style scoped>
.main{
  background-color: #EDEEF2;
  padding: 0;
}
.container{
  min-width: 1265px;
  width: 80%;
  margin: 20px auto;
}
.split{
  display: inline-block;
  width: 6px;
  height: 20px;
  margin-right: 12px;
  margin-top: 22px;
  margin-left: 12px;
  background: blue;
}
.back{
  font-size: 25px;
}
.tableCard{
  min-height: 700px;
}
</style>